<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in"><!--Vue过渡效果，用于在路由视图之间创建动画-->
      <router-view :key="key" /><!--确保了每次路由变化时，组件都会重新渲染-->
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    // 确保了路由变化时，组件会根据新的key重新渲染
    key() {
      return this.$route.path
    }
  }
}
</script>


